<!doctype html>
<html>
<head>
  <title>IE7 {CSS2: auto}</title>

  <!-- Compliance patch for Microsoft browsers -->
  <!--[if lt IE 9]><script src="../trunk/lib/IE9.js"></script><![endif]-->

  <style>

    ul:first-of-type li:first-of-type { background:#33f; }
    ul:first-of-type li:nth-of-type(2) { background:#f33; }
    ul:first-of-type li:last-of-type { background:#3f3; }

    ul:nth-of-type(2) li:first-child { background:#33f; }
    ul:nth-of-type(2) li:nth-child(2) { background:#f33; }
    ul:nth-of-type(2) li:last-child { background:#3f3; }

    ul:nth-of-type(3) li:nth-last-of-type(3) { background:#33f; }
    ul:nth-of-type(3) li:nth-child(2) { background:#f33; }
    ul:nth-of-type(3) li:nth-last-child(1) { background:#3f3; }

    ol:only-of-type li:nth-last-of-type(3) { background:#33f; }
    ol:only-of-type li:nth-child(2) { background:#f33; }
    ol:only-of-type li:nth-last-child(1) { background:#3f3; }

  </style>
 </head>
 <body>
  <script src="ie7-demo.js"></script>
  <h2>*-of-type</h2>

  <ul>
    <li>This background should be <em>blue</em></li>
    <li>This background should be <em>red</em></li>
    <li>This background should be <em>green</em></li>
  </ul>

  <ul>
    <li>This background should be <em>blue</em></li>
    <li>This background should be <em>red</em></li>
    <li>This background should be <em>green</em></li>
  </ul>

  <ul>
    <li>This background should be <em>blue</em></li>
    <li>This background should be <em>red</em></li>
    <li>This background should be <em>green</em></li>
  </ul>

  <ol>
    <li>This background should be <em>blue</em></li>
    <li>This background should be <em>red</em></li>
    <li>This background should be <em>green</em></li>
  </ol>
 </body>
</html>
